<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns:th="http://www.thymeleaf.org">
<head>
	<meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
	<title>广告管理管理</title>
	<link href="bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet" th:href="@{/bootstrap-3.3.7-dist/css/bootstrap.min.css}">
    <link href="css/common.css" rel="stylesheet" th:href="@{/css/common.css}">
    <script type="text/javascript" src="js/jquery-1.12.4.min.js" th:src="@{/js/jquery-1.12.4.min.js}"></script>
    <script src="bootstrap-3.3.7-dist/js/bootstrap.min.js" th:src="@{/bootstrap-3.3.7-dist/js/bootstrap.min.js}"></script>
          <script src="/My97DatePicker/WdatePicker.js" type="text/javascript" th:src="@{/My97DatePicker/WdatePicker.js}"></script>
    <script src="jquery-validation-1.14.0/lib/jquery.js" th:src="@{/jquery-validation-1.14.0/lib/jquery.js}"></script>
    <script src="jquery-validation-1.14.0/dist/jquery.validate.min.js" th:src="@{/jquery-validation-1.14.0/dist/jquery.validate.min.js}"></script>
	<!-- 引入bootstrap-fileinput -->
	<link th:href="@{/bootstrap-fileinput/fileinput.min.css}" rel="stylesheet"/>
	<script th:src="@{/bootstrap-fileinput/fileinput.min.js}"></script>
	<script type="text/javascript">
		$(document).ready(function() {
			$("#inputForm").validate({
			rules : {
				name: {
					required : true
				},
				href: {
					required : true
				},
				sort: {
					required : true
				},
				type: {
					required : true
				},
				status: {
					required : true
				},
			},
			messages : {
				name: {
					required : "名称必填"
				},
				href: {
					required : "链接必填"
				},
				sort: {
					required : "排序必填"
				},
				type: {
					required : "类型必填"
				},
				status: {
					required : "状态必填"
				},
			}
		})
		});
	</script>
</head>
<body>
	<br>
	<div class="container">
	<form id="inputForm" action="/admin/cms/adHref/save" method="post" class="form-horizontal"  enctype="multipart/form-data">
		<input type="hidden" name="id" th:value="${adHref.id}" />
			
			<div class="form-group" id="roleSelect">
				<label for="pic" class="col-sm-1 control-label">图片</label>
   				<div class="col-sm-6">
					<input id="urlLink" name="pic" class="form-control" type="hidden" th:value="${adHref.pic}">
                    <input type="file" id="uploadfile" class="file-loading" multiple="multiple">
						 <!-- <input name="pic" th:value="${adHref.pic}" maxlength="255" class="form-control"/> -->
				</div>
			</div>
			
			<div class="form-group" id="roleSelect">
				<label for="name" class="col-sm-1 control-label">名称<b class="error">*</b></label>
   				<div class="col-sm-6">
			
						 <input name="name" th:value="${adHref.name}" maxlength="255" class="form-control"/>
				</div>
			</div>
			
			<div class="form-group" id="roleSelect">
				<label for="href" class="col-sm-1 control-label">链接<b class="error">*</b></label>
   				<div class="col-sm-6">
			
						 <input name="href" th:value="${adHref.href}" maxlength="255" class="form-control"/>
				</div>
			</div>
			
			<div class="form-group" id="roleSelect">
				<label for="target" class="col-sm-1 control-label">目标</label>
   				<div class="col-sm-6">
			
						 <input name="target" th:value="${adHref.target}" maxlength="255" class="form-control"/>
				</div>
			</div>
			
			<div class="form-group" id="roleSelect">
				<label for="sort" class="col-sm-1 control-label">排序<b class="error">*</b></label>
   				<div class="col-sm-6">
			
						 <input name="sort" th:value="${adHref.sort}" maxlength="255" class="form-control"/>
				</div>
			</div>
			
			<div class="form-group" id="roleSelect">
				<label for="type" class="col-sm-1 control-label">类型<b class="error">*</b></label>
   				<div class="col-sm-6">
					<select name="type" class="form-control">
						<option value="">请选择</option>
						<option value="1" th:selected="${adHref.type=='1'}">主页轮播</option>
						<option value="2" th:selected="${adHref.type=='2'}">友情链接</option>
						<option value="3" th:selected="${adHref.type=='3'}">推文广告</option>
					</select>
				</div>
			</div>
			<div class="form-group" id="roleSelect">
				<label for="status" class="col-sm-1 control-label">状态<b class="error">*</b></label>
   				<div class="col-sm-6">
					<select name="status" class="form-control">
						<option value="">请选择</option>
						<option value="1" th:selected="${adHref.status=='1'}">正常</option>
						<option value="2" th:selected="${adHref.status=='2'}">停用</option>
					</select>
				</div>
			</div>
			<div class="form-group" id="roleSelect">
				<label for="remarks" class="col-sm-1 control-label">备注</label>
   				<div class="col-sm-6">
					<textarea name="remarks" th:text="${adHref.remarks}" rows="" cols="" class="form-control"></textarea>
						
				</div>
			</div>
			
			
			<div class="form-group" id="roleSelect">
				<label for="firstname" class="col-sm-1 control-label"></label>
   				<div class="col-sm-6">
					<button class="btn btn-success" type="submit">保 存</button>
					<button class="btn btn-inf" type="button" onclick="javascript:history.go(-1);">返 回</button>
				</div>
			</div>
	</form>
	</div>
	
	<script type="text/javascript">
		
	$("#uploadfile").fileinput({
	    language: 'zh', //设置语言
	    uploadUrl: "/upload/pic", //上传的地址，改成自己的
	    allowedFileExtensions: ['jpg', 'gif', 'png'],//接收的文件后缀
	    initialPreviewAsData:true,
	    initialPreview: $("#urlLink").val(),//vm.cmsVideoProduct.tcpPic这是avalon定义好，在getById里面已经赋值，取回显路径，不要直接复制
	    /* initialCaption: row.fileName, */
	    uploadAsync: true, //默认异步上传
	    showUpload: true, //是否显示上传按钮
	    showRemove : true, //显示移除按钮
	    showPreview : true, //是否显示预览
	    showCaption: false,//是否显示标题
	    browseClass: "btn btn-primary", //按钮样式     
	    dropZoneEnabled: false,//是否显示拖拽区域
	    maxFileCount: 5, //表示允许同时上传的最大文件个数
	    maxFileSize:2 *1024 *1024,
	    messages: {maxFileSize:'文件上传的最大大小为 2MB',acceptFileTypes:'此文件是不支持的图片格式'    },
	    enctype: 'multipart/form-data',
	    validateInitialCount:true
	});
	
	//导入文件上传完成之后的事件
    $("#uploadfile").on("fileuploaded", function (event, data, previewId, index) {
        var response = data.response;
        /* $("#fileMd5").val(response.fileMd5); */
        $("#version").val(response.fileName);
        $("#url").val(response.filePath);
        $("#urlLink").val(response.filePath);
        /* var imgPath = $("#urlLink").val();
        if(imgPath!=null && imgPath !=''){
        	$("#urlLink").val(imgPath+"|"+response.filePath);
        }else{
        	$("#urlLink").val(response.filePath);
        } */
    });
	
	$('#uploadfile').on('filepreupload', function(event, data, previewId, index) {
	   var form = data.form, files = data.files, extra = data.extra,
	    response = data.response, reader = data.reader;
	});
	
	</script>
</body>
</html>